
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🐝锋团大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/pc.css">
</head>
<body>
    <video autoplay loop muted width="1920" height="1080" class="bg" style="object-fit: fill">
        <source src="./assets/imgs/bg.mp4">
    </video>

    <!-- loading  -->
    <div class="loading" style="visibility:visible">
        <img width="120" src="./assets/imgs/loading.gif" />
        <img width="100" src="./assets/imgs/loading-text.png" />
    </div>
    <!-- loading  -->


    <!-- 内容 -->
    <main style="visibility:hidden">
        <div class="column">
            <div class="box" style="height:3rem">
                <div class="echarts-title">
                    <div class="iconfont icon1"></div> 本月销售情况
                </div>
                <div class="echarts-content pc-l1" style="background: none;"></div>
            </div>
            <div class="box" style="height:3rem">
                <div class="echarts-title">
                    <div class="iconfont icon1"></div> 客户地域排行
                </div>
                <div class="echarts-content pc-l2" style="background: none;"></div>
            </div>
            <div class="box" style="height:3rem">
                <div class="echarts-title">
                    <div class="iconfont icon2"></div> 24小时店铺浏览量曲线
                </div>
                <div class="echarts-content pc-l3" style="background: none;"></div>
            </div>
        </div>
        <div class="column">
            <div class="box box-m1" style="height:2.3rem">
                <div class="line"></div>
                <div class="title">锋团大屏可视化平台</div>
                <div class="line"></div>
            </div>
            <div class="box box-m2" style="height:3.9rem" >
                <p class="date">2022-06-13 07:36:35</p>
                <p class="money-desc">活动期间交易额</p>
                <p class="money">0</p>
                <p class="num">销售量：<span>0</span>件</p>
            </div>
            <div class="box" style="height:3rem">
                <div class="echarts-title">
                    <div class="iconfont icon2"></div> 每日成交量曲线
                </div>
                <div class="echarts-content pc-m3" style="background: none"></div>
            </div>
        </div>
        <div class="column">
            <div class="box box-r1" style="height:3rem">
                <div class="echarts-title">
                    <div class="iconfont icon3"></div> 会员购物占比
                </div>
                <div class="echarts-content pc-r1-box"  style="background: none">
                    <div class="pc-r1"></div>
                    <div class="pc-r1-content">
                        <p class="title">老会员购买</p>
                        <p class="num">22,339</p>
                        <p class="title">非会员购买</p>
                        <p class="num">2,134</p>
                    </div>
                </div>
            </div>
            <div class="box box-r2" style="height:3rem;">
                <div class="echarts-title">
                    <div class="iconfont icon4"></div> 订单动态
                </div>
                <div class="echarts-content" style="background: none">
                    <ul>
                        <li>11.05 &nbsp; 21:22 &nbsp; 产品名称1 &nbsp; <span>未付款</span> </li>
                        <li>11.05 &nbsp; 21:22 &nbsp; 产品名称2 &nbsp; <span class="green">已付款</span> </li>
                        <li>11.05 &nbsp; 21:22 &nbsp; 产品名称3 &nbsp; <span class="green">已付款</span> </li>
                        <li>11.05 &nbsp; 21:22 &nbsp; 产品名称4 &nbsp; <span class="green">已付款</span> </li>
                        <li>11.05 &nbsp; 21:22 &nbsp; 产品名称5 &nbsp; <span>未付款</span> </li>
                        <li>11.05 &nbsp; 21:22 &nbsp; 产品名称4 &nbsp; <span class="green">已付款</span> </li>
                    </ul>
                </div>
            </div>
            <div class="box" style="height:3rem">
                <div class="echarts-title">
                    <div class="iconfont icon5"></div> 最受欢迎产品TOP5
                </div>
                <div class="echarts-content pc-r3" style="background: none"></div>
            </div>
        </div>
    </main>
    <!-- 内容 -->

    <script src="./assets/js/pc-flexible.js"></script>
    <script src="./assets/js/common-jq.js"></script>
    <script src="./assets/js/common-echarts.js"></script>
    <script src="./assets/js/pc-l1.js"></script>
    <script src="./assets/js/pc-l2.js"></script>
    <script src="./assets/js/pc-l3.js"></script>
    <script src="./assets/js/pc-m1.js"></script>
    <script src="./assets/js/pc-m3.js"></script>
    <script src="./assets/js/pc-r1.js"></script>
    <script src="./assets/js/pc-r3.js"></script>
    <script>
    setTimeout(() => {
      $('.loading').css('visibility', 'hidden')
      $('main').css('visibility', 'visible')
    }, 300)
    </script>
</body>
</html>